<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="JZH">
    <script src="js/jquery-3.1.1.js"></script>
    <title>置顶效果</title>
<style>
   ul,li{
       margin: 0;
       padding: 0;
       list-style: none;
   } 
   .content{
       height: 2000px;
       background-color: deepskyblue;
   }
   .scroll{
       width: 15px;
       height: 80px;
       position: fixed;
       right: 0;
       top:50%;
   }
   .scroll li{
       height: 40px;
       background: url(images/scroll.png) no-repeat;
       position: relative;
   }
   .scroll .bottom{
       background-position: 0 -80px;
   }
   .scroll a{
       position: absolute;
       top: 0;
       right: 0;
       text-decoration: none;
       width: 80px;
       height: 40px;
       background-color: #d34;
       line-height: 40px;
       text-align: center;
       color: white;
       border-radius: 20px 0 0 20px;
       opacity: 0;
   }
   .scroll .bottom a{
       background-color: #333;
   }
</style>
</head>
<body>
    <div class="content">
        <ul class="scroll">
            <li class="top"><a href="javascript:;">返回顶部</a></li>
            <li class="bottom"><a href="javascript:;">返回底部</a></li>
        </ul>
    </div>
</body>
<html>
<script>
    $('.scroll li').hover(function(){
          $(this).find('a').stop().animate({opacity:1},'fast');
    },function(){
        $(this).find('a').stop().animate({opacity:0},'fast');
    });
    //返回顶部 
    $('.scroll .top a').click(function(){
        $('html,body').animate({
            scrollTop:0,
        },800);
    });
    //返回底部 
    $('.scroll .bottom a').click(function(){
        $('html,body').animate({
            //获取整个文档的高度
            scrollTop:$(document).height(),
        },800);
    });
    //找到html和body 
    console.dir($('html,body'));
</script>